<template>
  <div style="overflow:hidden">
    <div style="width:1100px;height:140px; margin:0 auto;">
      <el-input v-model="artName" placeholder="请输入文章名" @keydown.enter.native="queryArticles()"  style="width:300px;"></el-input>
      <el-button  style="margin-left:10px;" type="primary"  @click="queryArticles()">查询</el-button>
      <el-button  style="float: right;margin-top: 5px; margin-right: 20px;" type="primary" @click="">添加文章</el-button>
    </div>
    <div>
      <el-table
        :data="artData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        :show-header="true"
        :height="500"
        :header-cell-style="{background:'#F3F4F7',color:'#555'}"
        style="width: 100%; overflow-y: auto;">
        <el-table-column
          prop="ID"
          label="ID"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          align="center">
        </el-table-column>
        <el-table-column
          prop="CreatedAt"
          label="创建日期"
          align="center">
        </el-table-column>
        <el-table-column
          prop="cid"
          label="cid"
          align="center">
        </el-table-column>
        <el-table-column
          prop="desc"
          label="描述"
          align="center">
        </el-table-column>
        <el-table-column
          prop="Content"
          label="内容"
          align="center"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="img"
          label="图片链接"
          align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" >
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange0"
        @current-change="handleCurrentChange0"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="artData.length">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: "ArtList",
  data() {
    return {
      currentPage:1,
      pageSize: 5,
      artName: '',
      artData: [],
      artdata0 :{
        title: '',
        cid: '',
        desc: '',
        Content: '',
        img: ''
      }
    }
  },
  methods: {
    async queryArticles() {
      const {data: res} = await this.$http.get('/api/v1/select/articles')
      if (res.code !== 200) return this.$message.error(res.message)
      this.artData = res.datas
    },
    handleEdit(row) {
      this.$router.push({
        path: '/EditArticle',
        query: {
          artData: row
        }
      })
    },
    // 每页多少条
    handleSizeChange0(val) {
      this.pageSize = val;
    },
    // 当前页
    handleCurrentChange0(val) {
      this.currentPage = val;
    },
  },
  mounted() {
    this.queryArticles()
  }

}

</script>

<style scoped>

</style>
